<template>
    <div class="wrapper">
        <el-row>
            <el-col :span="24">
                <common-card>
                    <template #header>
                        <div style="font-family: Roboto-Thin; padding: 20px; color: #fff">
                            <span style="font-size: 20px; display: inline-block; width: 100%">班级列表
							<el-button
                                    v-if="!isTeacher"
									style="margin-left: 20px;"
									@click="addClass()"
									icon="el-icon-plus"
									type="primary"
									plain
									circle
									size="small">
								</el-button>
							</span>

                            <span style="font-size: 14px; display: inline-block; width: 100%; margin-top: 10px">所有班级</span>
                        </div>
                    </template>
                    <template #main>
                        <el-row style="margin-bottom: 15px" type="flex" align="middle">
                            <el-select v-model="searchMajorid" clearable placeholder="专业名称" size="mini"
                                       style="margin-right: 10px" @change="handlesearch">
                                <el-option
                                        v-for="item in options2"
                                        :key="item.value"
                                        :label="item.majorname"
                                        :value="item.majorid">
                                </el-option>
                            </el-select>
                            <el-input
                                    clearable
                                    size="mini"
                                    @input="handlesearch"
                                    class="tableSearch"
                                    placeholder="班级名称"
                                    prefix-icon="el-icon-search"
                                    v-model="searchClassname">
                            </el-input>

                        </el-row>

                        <el-table
                                v-loading="tableLoading"
                                :max-height="height"
                                :data="tableData"
                                stripe
                                style="width: 100%">
                            <el-table-column
                                    prop="classname"
                                    label="班级">
                            </el-table-column>
                            <el-table-column
                                    prop="departmentname"
                                    label="学院名称">
                            </el-table-column>
                            <el-table-column
                                    prop="studentcount"
                                    label="班级人数">
                            </el-table-column>
                            <el-table-column
                                    prop="majorname"
                                    label="专业名称">
                            </el-table-column>
                            <el-table-column
                                    label="操作"
                                    width="180"
                                    v-if="!isTeacher">
                                <template slot-scope="scope" v-if="!isTeacher">
                                    <el-button
                                            @click="editClass(scope.row)"
                                            icon="el-icon-setting"
                                            type="primary"
                                            plain
                                            circle
                                            size="small">
                                    </el-button>
                                    <el-button
                                            @click="deleteClass(scope.row)"
                                            icon="el-icon-delete"
                                            type="danger"
                                            plain
                                            circle
                                            size="small">
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </common-card>
            </el-col>
        </el-row>
        <add-dialog :dialog-visible="isAdd" :is-edit="isEdit" @closeDialog="isOpenDialog(false)"
                    :class-data="classData" @fresh="fetchAllClass"/>
    </div>
</template>

<script>
    import CommonCard from '../../components/Cards/CommonCard';
    import addDialog from './addDialog'
    import * as majorManage from '@/api/majorManage';
    import * as college from '@/api/college';
    import * as classManage from '@/api/classManage';
    import * as scoreManage from '@/api/scoreManage';
    import Cookie from "js-cookie";

    export default {
        name: 'index',
        components: {
            CommonCard,
            addDialog,
        },
        data() {
            return {
                total: 0,
                currentPage: 1,
                departmentData: {},
				classData: {},
                searchClassname: '',
                searchMajorid: '',
                search: '',
                tableLoading: true,
                height: '',
                isAdd: false,
                isEdit: false,
                isTeacher: false,
                tableData: [],
                options: [],
                options2: []
            }
        },
        methods: {
            async handlesearch () {
                let req = {};
                if (this.searchMajorid && this.searchClassname) {
                    req = {
                        majorid: this.searchMajorid,
                        classname: this.searchClassname
                    }
                } else if (!this.searchMajorid && this.searchClassname) {
                    req = {
                        classname: this.searchClassname
                    }
                } else if (this.searchMajorid && !this.searchClassname) {
                    req = {
                        majorid: this.searchMajorid
                    }
                }
                const res = await classManage.fetchClassByCondition(req);
                this.tableData = res.msg;
            },
            async deleteClass(data) {
                console.log(data);
                try {
                    await this.$confirm('此操作将永久删除该班级, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    });
                    await classManage.deleteClass(data.classid);
                    this.$notify({
                        title: '信息',
                        type: 'success',
                        message: '删除成功!'
                    });
                    await this.fetchAllClass();
                } catch (e) {
                    console.log(e)
                }
            },
            async fetchAllClass() {
                try {
                    this.tableLoading = true;
                    const res = await classManage.fetchClassByCondition({});
                    console.log(res.msg)
                    this.tableData = res.msg;
                } catch (e) {
                    console.log(e)
                } finally {
                    this.tableLoading = false;
                }
            },
            async getTeacherInfo(){
                let resInfo = JSON.parse(Cookie.get("userInfo"));
                console.log(resInfo);
                if (resInfo.role === 2){
                    this.studentid = resInfo.token;
                }else if (resInfo.role === 1){
                    console.log('teacherOK');
                    this.teacherusername = resInfo.token + "";
                    console.log(resInfo.token);
                    console.log(this.teacherusername);
                    const userRes = await scoreManage.getUserId(this.teacherusername);
                    this.teacherID = userRes.msg.userid;
                    if (this.teacherID){
                        this.isTeacher = true;
                    }
                    console.log(this.teacherID);
                }
            },
            editClass(data) {
                try {
                    this.classData = data;
                    this.isOpenDialog(true, true);
                } catch (e) {
                    console.log(e);
                }
            },
            addClass(data) {
                try {
                    this.classData = data;
                    this.isOpenDialog(true, false);
                } catch (e) {
                    console.log(e);
                }
            },
            isOpenDialog(isOpen, isEdit) {
                this.isAdd = isOpen;
                this.isEdit = isEdit;
            },
            async getCollege () {
                const res = await college.fetchUserList();
                this.options = res.msg
            },
            async getMajor(){
                const res = await majorManage.fetchDepartmentList({});
                this.options2 = res.msg
            },
        },
            created () {
                this.height = window.innerHeight - 150;
                this.fetchAllClass();
                this.getTeacherInfo();
                this.getCollege();
                this.getMajor();
            }
        }
</script>

<style scoped>
    .wrapper {
        padding: 0 15px;
    }

    .tableSearch {
        width: 221px;
    }

    .tableSearch >>> .el-input__inner {
        border-radius: 415px;
    }

    .btn {
        margin-right: 7px;
    }
</style>